(ns db-explorer.core
  (:require [goog.string :as gstr]
            [goog.string.format]
            [goog.dom :as gdom]
            [reagent.core :as r]
            [re-frame.core :as rf]
            [antizer.reagent :as ant]

            [clojure.string :as str]))

(enable-console-print!)

(defn left-nav []
  [ant/menu {:mode "inline"}
   (for [j (range 1 4)]
     ^{:key j} [ant/menu-sub-menu {:title (str "subnav" j)} 
      (for [i (range 1 5)]
        ^{:key i} [ant/menu-item (str "option" i)])])]
  
  )

(defn main-content []
  [:div.container
   [ant/tabs {:type "card" :on-change (fn [key] (println key)) :tab-position "left"}
    [ant/tabs-tab-pane {:tab "Data" :key "data"}
     [ant/row {:gutter 16 :type "flex" :justify "start"}
      [ant/col {:span 4 :offset 0}
       [ant/card
        [ant/tree {:show-line true :defaultExpandAll true}
         [ant/tree-tree-node {:title "p1" :key "0-0"}
          [ant/tree-tree-node {:title "p 1-0" :key "0-0-0"}]]
         [ant/tree-tree-node {:title "p2" :key "0-1"}
          [ant/tree-tree-node {:title "p 2-0" :key "0-1-0"}]]]]]
      [ant/col {:span 10 :offset 1} 
       [ant/card
        (for [i (range 1 5)]
          [:p (str "123" i)])]]]]
     [ant/tabs-tab-pane {:tab "cmd" :key "cmd"}
      [:p "abc"]]]]
  )
(defn top-nav []
  [ant/menu {:on-click #(.log js/console %)
             :theme "dark" :defaultSelectedKeys ["redis"]
             :style {:lineHeight "64px"}
             :mode "horizontal"}
   (for [db ["memcached" "redis" "mongodb" "zookeeper"]]
     ^{:key db} [ant/menu-item (str/capitalize db)])])

(defn main-body []
  [ant/layout [ant/affix 
               [ant/layout-header 
                [:div.logo "db-explorer"]
                [top-nav]]]
   [ant/layout

    [ant/layout-sider {:style {:background "#fff"}} [left-nav]]
    [ant/layout-content [main-content]]]
    [ant/layout-footer
     [ant/affix [:center "Footer"]]]])

(r/render [main-body]
          (gdom/getElement "app"))
